<template>
	<view class="content">
		<view class="head" @click="goMyDetail">
			<view class="h-left">
				<image class="h-img" :src="picCar" mode=""></image>
				<view class="name">{{userName || ''}}</view>
			</view>
			<view class="h-right">
				<img class="h-right-img" :src="linkImg" alt="">
			</view>
		</view>
		<view class="box">
			<view class="item" v-for="(item,index) in list" :key="index" @click="goTo(index)">
				<img class="img" :src="item.src" mode=""></img>
				<view class="item-right">
					<view class="item-name">
						{{item.name}}
					</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import request from '../../requst.js'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import icons from "../../common/icons.js"
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				list: [{
					name:"快速抢单",
					src:icons.icons.iconOrderGrab
				},
				{
					name:"消息中心",
					src:icons.icons.iconCarinfo
				},
				{
					name:"车辆管理",
					src:icons.icons.iconCarmanage
				}],
				userName:null,
				linkImg:icons.icons.link,
				picCar:icons.icons.picCar
			}
		},
		onLoad(){
			this.getMyInfo();
		},
		methods: {
			goTo(index) {
				switch (index) {
					case 0:
						uni.navigateTo({
							url: "/pages/my/grabeOrder/grabeOrder"
						});
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/my/messagecenter/messagecenter"
						});
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/my/carmanage/carmanage"
						});
						break;
				}
			},
			goMyDetail(){
				uni.navigateTo({
					url: "/pages/my/myDetail/myDetail"
				});
			},
			//获取个人信息
			getMyInfo(){
				request({
					url:'qijian/personalCentre/userInfo',
					method: 'GET',
					success: res => {
						console.log(res)
						if(res.data.code == 401) {
							uni.showModal({
								content:"登陆已过期，请重新登陆",
								success: () => {
									uni.reLaunch({
										url:'../login/login'
									})
								}
							})
						}
						if(res.data.code == 200){
							this.userName = res.data.userInfo.userName;
						}
					}
				})
			}
			
		}
	}
</script>

<style>
	page{
		background: #F5F5F5;
	}
</style>

<style scoped>
	.item-name{
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}
	.item-right{
		width: 90vw;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EBEBEB;
		padding: 20rpx 0;
	}
	.h-right-img{
		width: 248rpx;
		height: 100rpx;
	}
	.h-left{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 30rpx;
	}
	.h-right{
		
	}
	.name{
		font-size: 48rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.h-img{
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		margin-right: 20rpx;

	}
	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 176rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
	}

	.align-center {
		align-items: center !important;
	}

	.d-flex {
		display: flex !important;
	}

	.img {
		max-width: 32.72rpx;
		max-height: 32rpx;
		margin-right: 20rpx;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;

	}
	
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx 10rpx 20rpx;
		background-color: #FFFFFF;
		height: 100rpx;
	}

	.space-between {
		justify-content: space-between !important;
	}
</style>
